<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <div id='bue'>
    <h2 style="cursor: pointer;" b-on:click="show">
      这是你的动态输出的> {{name}} << 点这里
    </h2>
    <input b-model="name"/>
    <div style="height: 40px"></div>
    <h3>你点击了：<span style="color: red" id="k">{{num}}</span></h3>
  </div>
</head>
<body>
  <script src="./js/compile.js"></script>
  <script src="./js/bue_0.3.js"></script>
  <script>
    /* issues 实现只替换 模板{{}}的内容 */
    new Bue({
      el: '#bue',
      data: {
        name: 'hello Bue!',
        num: 0
      },
      methods: {
        show() {
          this.num++
          const nodeText = document.getElementById('k').textContent
          console.log(`数据值为${this.num}, dom的值为 ${nodeText}`);
        }
      },
      mounted() {
        console.log('[== Bue启动成功！==]');
      }
    })
  </script>
</body>
</html>
